<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/gs.png" alt="">
      </div>
      <h2>鹰潭市供水集团有限公司江北水厂</h2>
    </div>
    <div class="waterworks_top">
      <div class="top_item">
        <div class="top_item_img">
          <img src="@/assets/img/jnb.png" alt="">
        </div>
        <div class="top_item_cont">
          <h2>节能泵数量</h2>
          <h3>{{this.info.device_cnt}}<span>台</span></h3>
        </div>
      </div>
      <div class="top_item">
        <div class="top_item_img">
          <img src="@/assets/img/rjnh.png" alt="">
        </div>
        <div class="top_item_cont">
          <h2>日均能耗</h2>
          <h3>{{Math.round(this.info.elec_average)}}<span>KWh</span></h3>
        </div>
      </div>
      <div class="top_item">
        <div class="top_item_img">
          <img src="@/assets/img/rgnl.png" alt="">
        </div>
        <div class="top_item_cont">
          <h2>日供能力</h2>
          <h3>{{this.info.water_average}}<span>m³/天</span></h3>
        </div>
      </div>
    </div>
    <div class="line_cont">
      <div class="line"></div>
    </div>
    <div class="waterworks_bottom">
      <div class="bottom_item">
        <div class="title">
          <h2>累计运行天数</h2>
          <img src="@/assets/img/bjblock.png" alt="">
        </div>
        <h3>{{this.info.run_time}}</h3>
        <h4>(天)</h4>
      </div>
      <div class="bottom_item">
        <div class="title">
          <h2>运行流量</h2>
          <img src="@/assets/img/bjblock.png" alt="">
        </div>
        <h3>{{this.info.run_water}}</h3>
        <h4>(㎡/h)</h4>
      </div>
      <div class="bottom_item">
        <div class="title">
          <h2>出场压力</h2>
          <img src="@/assets/img/bjblock.png" alt="">
        </div>
        <h3>{{this.info.out_press}}</h3>
        <h4>(Mpa)</h4>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      info: []
    }
  },
  async created() {
    // 接口参数
    const id = { tenantid: 1128 }
    const res = await api.siteInfo(id)
    this.info = res.data
  }
}
</script>

<style lang="scss" scoped>
.waterworks_top {
  display: flex;
  justify-content: space-around;
  padding: 0.65rem 0.3rem 0 0.3rem;

  .top_item {
    width: 30%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.36rem;

    .top_item_img {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        display: flex;
      }
    }

    .top_item_cont {
      width: 60%;

      h2 {
        color: #BDE2FF;
        font-size: 0.14rem;
        padding: 0.1rem 0 0.08rem 0.06rem;
        white-space: nowrap;
      }

      h3 {
        color: #FFAE00;
        font-size: 0.24rem;
        padding-left: 0.06rem;
        white-space: nowrap;

        span {
          color: #fff;
          font-size: 0.12rem;
        }

        // &:nth-child(2){
        //   color: #24E1AE;
        // }
        // &:nth-child(3){
        //   color: #0575FF;
        // }
      }
    }

    &:nth-child(2) {
      .top_item_cont {
        h3 {
          color: #24E1AE;
        }
      }
    }

    &:nth-child(3) {
      .top_item_cont {
        h3 {
          color: #0575FF;
        }
      }
    }
  }
}

.line_cont {
  padding: 0 0.3rem;

  .line {
    width: 100%;
    height: 1px;
    background: #5FA1FF;
    position: relative;

    &::after {
      content: '';
      background: #1064dd;
      width: 95%;
      position: absolute;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.waterworks_bottom {
  padding: 0.25rem 0.4rem 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .bottom_item {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title {
      width: 100%;
      padding: 0 0.1rem 0.1rem 0;
      position: relative;

      h2 {
        font-size: 0.12rem;
        color: #fff;
        z-index: 2;
        padding-left: 0.3rem;
        white-space: nowrap;
      }

      img {
        width: 68%;
        position: absolute;
        bottom: 0;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    h3 {
      color: #50D5FD;
      font-size: 0.19rem;
      padding: 0.1rem 0 0 0;
    }

    h4 {
      color: #ffff;
      opacity: 0.5;
      font-size: 0.12rem;
    }

    &:nth-child(2),
    &:nth-child(3) {
      h2 {
        padding-left: 0.4rem;
      }
    }
  }
}
</style>